<link rel="import" href="../components/core-selector/core-selector.html">

<polymer-element name="nav-drawer-panel">
<template>
  <link rel="stylesheet" href="nav-drawer-panel.css">
  <div class="transition">

    <div id="main">
      <content select="[main]"></content>
      <div id="scrim" on-tap="{{togglePanel}}"></div>
    </div>
    
    <div id="drawer">
      <content select="[drawer]"></content>
    </div>

  </div>

</template>
<script>

  Polymer('nav-drawer-panel', {
    //use localStorage drawer_layout to change layout
    ready: function(){
      if(localStorage.drawer_layout == "false"){
        this.$.drawer.style.display="none";
        this.$.main.style.left=0+"px";
      }else{
        this.$.main.style.left=256+"px";
        this.$.drawer.style.display="block";
      }
    },

    //toggle panel
    togglePanel: function() {
      if(this.$.drawer.style.display != "none"){
        this.$.drawer.style.display="none";
        this.$.main.style.left=0+"px";
        localStorage.setItem("drawer_layout", "false");
      }else{
        this.$.main.style.left=256+"px";
        this.$.drawer.style.display="block";
        localStorage.setItem("drawer_layout", "true");
      }
    },
  });

</script>
</polymer-element>
